<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<ui:component>
    <style type="text/css">
        .left {
            float: left;
            text-align: left;
        }

        .right {
            float: right;
            text-align: right;
        }
    </style>
    <center>
        <h:panelGrid columns="1" columnClasses="left">
            <h:outputLabel value="This will setup new account associated email."/>
            <h:panelGrid columns="2">
                <h:outputLabel value="Contact Email:"/>
                <h:outputLabel value="#{accountSessionBean.account.mail}"/>
                <h:outputLabel value="New Email:"/>
                <h:inputText id="emailInput" value="#{accountEditBean.email}" validatorMessage="Please enter valid email." required="true">
                    <f:validator validatorId="emailValidator"/>
                    <f:validateLength minimum="9" maximum="60"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>
                </h:panelGrid>
                <rich:message for="emailInput"/>
            <rich:separator width="50%" height="1px"/>
                <h:outputLabel value="To change your email settings, please enter your YouConnect password.  "/>
                    <h:panelGrid columns="2">
                    <h:outputLabel value="#{resources.passwordLabel}"/>
                    <h:inputSecret value="#{accountEditBean.password}" required="true"/>
                        <h:column/>
                        <a4j:commandButton value="SetMail" action="#{accountEditBean.changeEmail}" reRender="changerMessage, emailTaken, email"/>
                </h:panelGrid>
            <a4j:outputPanel layout="none">
                <h:outputText id="emailTaken" value="E-mail is already used!" style="color:red; margin:10px;" rendered="#{accountEditBean.taken}"/>
            </a4j:outputPanel>
                <!--<a4j:commandButton value="Set Mail"-->
                                   <!--reRender="confirmWithPassword"-->
                                   <!--oncomplete="Richfaces.showModalPanel('confirmWithPassword');"-->
                                   <!--limitToList="true"/>-->

        </h:panelGrid>
    </center>
</ui:component>


</html>
